<template>
  <!-- 合同详情 -->
  <div>
    <table class="detail-table" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <span class="labelTitle">合同名称</span>
        </td>
        <td colspan="3">
          <span class="infoText">{{ formData.contractName }}</span>
        </td>
        <td>
          <span class="labelTitle">建设单位</span>
        </td>
        <td colspan="3">
          <span class="infoText">{{ formData.construction }}</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="labelTitle">合同工期</span>
        </td>
        <td>
          <span class="infoText">{{ formData.contractDuration }}天</span>
        </td>
        <td>
          <span class="labelTitle">合同单价</span>
        </td>
        <td>
          <span class="infoText">{{ formData.contractPriceName }}元</span>
        </td>
        <td>
          <span class="labelTitle">合同总金额</span>
        </td>
        <td>
          <span class="infoText">{{ formData.contractAmountName }}万元</span>
        </td>
        <td>
          <span class="labelTitle">钻孔总数</span>
        </td>
        <td>
          <span class="infoText">{{ formData.drillingCount }}个</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="labelTitle">钻孔总米数</span>
        </td>
        <td>
          <span class="infoText">{{ formData.drillMember }}m</span>
        </td>
        <td>
          <span class="labelTitle">最小深度</span>
        </td>
        <td>
          <span class="infoText">{{ formData.minScope }}m</span>
        </td>
        <td>
          <span class="labelTitle">最大深度</span>
        </td>
        <td>
          <span class="infoText">{{ formData.maxScope }}m</span>
        </td>
        <td colspan="2">
          <span class="labelTitle" />
        </td>
      </tr>
    </table>
    <FileUplode
      ref="fileUplode"
      :edit-file-list="conractFileList"
      :read-only="isReadonly"
      @getFileList="getContractFile"
    />
  </div>
</template>

<script>
import { getContractById } from '@/api/projectManage/project/proContract'
// 上传文件
import FileUplode from '@/components/Upload/FileUplode'

export default {
  name: 'DetailDialog',
  components: { FileUplode },
  props: {
    proId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isReadonly: true,
      conractFileList: [], // 回显合同
      /* 新增 start */
      btnDisabled: false,
      dialogTitle: '', // 对话框是否弹出显示
      dialogVisible: false, // 对话框是否弹出显示
      formData: {
        id: '',
        proId: '', // 项目id
        contractName: '', // 合同名称
        construction: '', // 建设单位
        contractPriceName: '',
        contractPrice: '', // 合同单价
        contractDuration: '', // 合同工期
        contractAmountName: '',
        contractAmount: '', // 合同总金额
        drillingCount: '', // 钻孔总个数
        drillMember: '', // 钻孔总米数
        minScope: '', //  勘探最小深度
        maxScope: '', // 勘探最大深度
        appFiles: '', // 合同附件
        fileDelete: '',
        contractType: '0'
      }
      /* 新增 end */
    }
  },
  mounted() {
    this.handleDetail(this.proId)
  },
  methods: {
    // 合同总金额
    contractAmount(e) {
      if (e) {
        this.formData.contractAmountName = this.divideMoney(e, 6)
        this.formData.contractAmount = e * 10000
      }
    },
    // 合同单价
    contractPrice(e) {
      if (e) {
        this.formData.contractPriceName = this.divideMoney(e, 2)
        this.formData.contractPrice = e
      }
    },
    // 获取合同附件
    getContractFile(fileList, deleteFileIds) {
      this.formData.appFiles = fileList
      this.formData.fileDelete = deleteFileIds
    },
    // 获取详情
    handleDetail(id) {
      getContractById(id).then(res => {
        if (res.data) {
          this.dialogTitle = '合同详情'
          this.formData = { ...res.data }
          this.formData.contractAmountName = this.divideMoney(res.data.contractAmount, 6, true)
          this.formData.contractPriceName = this.divideMoney(res.data.contractPrice, 2)
          if (res.data.appFiles && res.data.appFiles.length > 0) {
            this.conractFileList = res.data.appFiles
          }
        }
      })
    }
  }
}
</script>

